<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="table/css/bootstrap.min.css">
    <link rel="stylesheet" href="table/css/bootstrap-table.min.css">
    <script src="table/js/jquery.min.js"></script>
    <script src="table/js/bootstrap.min.js"></script>
    <!--<script src="assets/bootstrap2.3/js/bootstrap.min.js"></script>-->
    <script src="table/js/tableExport.js"></script>
    <script src="table/js/jquery.base64.js"></script>
    <script src="table/js/bootstrap-table.js"></script>
    <script src="table/js/bootstrap-table-export.js"></script>
    <script>
        $(function () {
            $('#build').click(build);//.trigger('click');
            $('#cells, #rows').keyup(function (e) {
                if (e.keyCode === 13) {
                    build();
                }
            });
        });

        function build() {
            var cells = $('#cells').val(),
                rows = $('#rows').val(),
                i, j, row,
                columns = [],
                data = [];

            for (i = 0; i < cells; i++) {
                columns.push({
                    field: 'field' + i,
                    title: 'Cell' + i
                });
            }
            for (i = 0; i < rows; i++) {
                row = {};
                for (j = 0; j < cells; j++) {
                    row['field' + j] = 'Row-' + i + '-' + j;
                }
                data.push(row);
            }
            $('#table').bootstrapTable('destroy').bootstrapTable({
                columns: columns,
                data: data
            });
        }

        function delete_confirm() {
            event.returnValue = confirm("删除是不可恢复的，你确认要删除吗？");
        }
    </script>
</head>
<body>
<div class="container">
    <p>
    <div class="form-group">
    <form action="addRole.do" method="post">
        <div class="input-group">
            <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
            <input type="text" class="form-control" name="newRoleName" placeholder="新角色名" style="width: 20%">
            <button class="btn btn-danger" type="submit" ><span class="glyphicon glyphicon-plus"></span>添加</button>
        </div>
    </form>
    </div>
    </p>
    <table id="table"
           data-toggle="table"
           data-show-columns="true"
           data-search="true"
           data-show-refresh="true"
           data-pagination="true"
           data-height="600">
        <thead>
        <tr class="info">
            <th>ID</th>
            <th>角色名</th>
            <th>权限数</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach var="r" items="${allRoles}" >
            <tr >
                <td class="success">${r.roleId}</td>
                <td>${r.roleName}</td>
                <td>10</td>
                <td>
                    <!-- 分配角色模态框（Modal）start -->
                    <div class="modal fade" id="myModal${r.roleId}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog" style="width: 30%">
                            <div class="modal-content" style="background-color: #afd9ee">
                                <div class="modal-header" >
                                    <h4 class="modal-title" id="myModalLabel${r.roleId}">
                                        请选择<strong>${r.roleName}</strong>需要分配的权限
                                    </h4>
                                </div>
                                <form class="form-group" method="post" action="allocatePermissions.do">
                                    <div class="modal-body">
                                        <c:set var="j" value="0"></c:set>
                                        <c:set var="permissionListOfRoleId" value="permissionListOfRoleId${r.roleId}"></c:set>
                                        <c:forEach var="p" items="${allPermissions}">
                                            <input type="checkbox" value="${p.permissionId}" name="checkPermission"
                                                   <c:forEach var="rp" items="${map.get(permissionListOfRoleId)}" >
                                                    <c:if test="${rp.permissionId eq p.permissionId}">checked="checked"</c:if>
                                                   </c:forEach>
                                            >${p.permissionName}
                                            <c:set var="j" value="${(j+1)%4}"></c:set>
                                            <c:if test="${j==0}"><br></c:if>
                                        </c:forEach>
                                    </div>
                                    <div class="modal-footer">
                                        <input name="roleId" type="hidden" value="${r.roleId}">
                                        <button type="submit" class="btn btn-primary">提交</button>
                                        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                                    </div>
                                </form>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal -->
                    </div>
                    <!-- 分配角色模态框（Modal）end -->
                    <a>
                        <button class="btn btn-primary" type="button"  data-toggle="modal" data-target="#myModal${r.roleId}">
                            <span class="glyphicon glyphicon-lock">授权</span>
                        </button>
                    </a>
                    <a onclick="delete_confirm();">
                        <button class="btn btn-danger" type="button" ><span class="glyphicon glyphicon-remove-circle">删除</span></button>
                    </a>
                    <a>
                        <button class="btn btn-success" type="button"><span class="glyphicon glyphicon-pencil">修改</span></button>
                    </a>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>

</body>
</html>
